import 'package:cached_network_image/cached_network_image.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:lazy_food/models/tab_model.dart';
import 'package:lazy_food/models/weekly_model.dart';
import 'package:lazy_food/net/network.dart';
import 'package:lazy_food/util/string+.dart';

import '../../components/keepAliveWrapper/keep_alive_arapper.dart';

class WeeklyPage extends StatefulWidget {
  TabModel tab;
  WeeklyPage({Key? key, required this.tab}) : super(key: key);
  @override
  State<WeeklyPage> createState() => _WeeklyPageState();
}

class _WeeklyPageState extends State<WeeklyPage> {
  EasyRefreshController _refreshController =
      EasyRefreshController(controlFinishRefresh: true);
  List<WeeklyModel> _models = [];

  void _onRefresh() {
    EasyLoading.show();
    Network.getHomeWeekly().then((value) {
      setState(() {
        _models = value;
      });
      EasyLoading.dismiss();
      _refreshController.finishRefresh();
    });
  }

  Widget _getItems(
      BuildContext context, IconData icon, String title, String desc) {
    double itemW = (MediaQuery.of(context).size.width - 50) / 2.0;
    return Container(
      width: itemW,
      height: itemW,
      decoration: BoxDecoration(
        color: Colors.white24,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: [
          SizedBox(height: 10),
          Icon(
            icon,
            color: Colors.white,
            size: 50,
          ),
          SizedBox(height: 10),
          Text(title, style: TextStyle(color: Colors.white, fontSize: 16)),
          SizedBox(height: 15),
          Text(desc, style: TextStyle(color: Colors.white, fontSize: 13)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return EasyRefresh(
      controller: _refreshController,
      refreshOnStart: true,
      onRefresh: _onRefresh,
      child: KeepAliveWrapper(
        child: ListView.separated(
          itemBuilder: (context, index) {
            if (index == 0) {
              return SizedBox(height: 5);
            } else if (index <= _models.length) {
              WeeklyModel model = _models[index - 1];
              double imgW = (MediaQuery.of(context).size.width - 60) / 3.0;
              double imgH = imgW * 0.75;
              return Container(
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 日期
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Text(
                            model.display_date,
                            style: TextStyle(color: Colors.white, fontSize: 12),
                          ),
                        ),
                        Text(
                          model.tag,
                          style: TextStyle(
                              color: Color.fromARGB(255, 210, 189, 1),
                              fontSize: 12),
                        ),
                      ],
                    ),
                    SizedBox(height: 5),
                    // 标题
                    Text(
                      model.message + model.name,
                      softWrap: true,
                      maxLines: 2,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 5),
                    // 分数和消耗
                    Row(
                      children: [
                        // 时间
                        Row(
                          children: [
                            Icon(
                              Icons.timeline,
                              color: Colors.white,
                              size: 12,
                            ),
                            SizedBox(width: 2),
                            Text(
                              '${model.time_consuming}分钟',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 12),
                            )
                          ],
                        ),
                        SizedBox(width: 15),
                        // 卡路里
                        Row(
                          children: [
                            Icon(
                              Icons.fire_hydrant,
                              color: Colors.white,
                              size: 12,
                            ),
                            SizedBox(width: 2),
                            Text(
                              '${model.calories}大卡',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 12),
                            )
                          ],
                        ),
                      ],
                    ),
                    SizedBox(height: 20),
                    Stack(
                      children: [
                        // 图片
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: model.items.map((e) {
                            return ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: CachedNetworkImage(
                                imageUrl: e.recipe.image.url_pattern.toImage(),
                                width: imgW,
                                height: imgH,
                                fit: BoxFit.cover,
                              ),
                            );
                          }).toList(),
                        ),
                        // 阴影遮罩
                        Container(
                          height: imgH,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                              colors: [
                                Colors.transparent,
                                Colors.black,
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              );
            } else {
              return Container(
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  children: [
                    SizedBox(height: 20),
                    Text(
                      '一周餐单·会员新权益',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 20),
                    Row(
                      children: [
                        _getItems(
                            context, Icons.account_box, '每天3道菜*', '时令蔬菜\n荤素搭配'),
                        SizedBox(width: 10),
                        _getItems(
                            context, Icons.account_box, '仅需30分钟', '简单省时\n快手方便'),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      children: [
                        _getItems(context, Icons.account_box, '人均最高700大卡',
                            '控制热量\n健康营养'),
                        SizedBox(width: 10),
                        _getItems(
                            context, Icons.account_box, '即时呈现', '一周餐单\n会员专属'),
                      ],
                    ),
                    SizedBox(height: 20),
                    Text(
                      '*每餐的总卡路里包含200克米饭的热量，约232大卡，可以替换成等量全谷物，杂豆或薯类更健康',
                      style: TextStyle(color: Colors.white54, fontSize: 10),
                    ),
                    SizedBox(height: 20),
                  ],
                ),
              );
            }
          },
          separatorBuilder: (context, index) {
            return SizedBox(
              height: 20,
            );
          },
          itemCount: _models.length + 2,
        ),
      ),
    );
  }
}
